<template>
  <div id="professtional">
    <div class="collegeIntro">
      <h2 style="display: block; margin-top: 20px">开设专业</h2>
      <el-card class="major">
        <el-card class="major_info_item1">
          <table class="both_heigh_table">
            <tbody>
              <tr>
                <th>国家特色专业</th>
                <th>
                  <span v-for="(item, index) in tsMajorList" class="majorStyle">
                    {{ item.name }}
                  </span>
                </th>
              </tr>
            </tbody>
          </table>
        </el-card>
        <el-card class="major_item2">
          <table>
            <thead>
              <tr>
                <th>类别</th>
                <th>专业</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in majorList" :key="index">
                <td>{{ item.name }}</td>
                <td>
                  <span
                    class="major_item"
                    v-for="(major, majorIndex) in item.list"
                    :key="majorIndex"
                    >{{ major.name }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      tsMajorList: [
        {
          heat: null,
          name: "",
          majorid: null,
        },
      ],
      majorList: [
        {
          name: "哲学类(本)",
          list: [
            {
              name: "哲学",
            },
            {
              name: "宗教学",
            },
            {
              name: "逻辑学",
            },
          ],
        },
      ],
    };
  },
  created() {
    console.log(this.$route.params.id);
    this.$axios.get("/universityMajor/" + this.$route.params.id).then((res) => {
      console.log(res);
      this.majorList = res.data;
    });
    this.$axios.get("/nationalMajor/" + this.$route.params.id).then((res) => {
      console.log(res);
      this.tsMajorList = res.data;
    });
  },
};
</script>


<style scoped>
h2 {
  font-size: 20px;
  font-weight: bold;
}
li {
  list-style: none;
}

.collegeIntro {
  margin-top: 3.3vh;
}
.collegeIntro h2 {
  display: block;
  margin-left: 1.5vw;
}

.collegeIntro .import {
  float: left;
  width: 3.7vw;
  margin-left: 0.7vw;
}

.collegeIntro .college .num {
  float: left;
  width: 3.7vw;
  height: 8.1vh;
  line-height: 8.1vh;
  text-align: center;
  margin-left: 1.5vw;
  color: rgba(255, 21, 21);
  font-weight: bold;
  font-size: 24px;
}

.major {
  width: 98%;
  margin-left: 0.7vw;
  margin-top: 1.6vh;
  margin-bottom: 3.3vh;
}

.major_item1 {
  display: flex;
  margin: 1.6vh 0.4vw;
}

.major_info_item1 {
  border: none;
  width: 100%;
  color: #333;
}

.major_info_item1 table {
  width: 100%;
  padding: 0 3.2vw 0 3.5vw;
  overflow: hidden;
}

.major_info_item1 table tr {
  border: 1px solid #ededed;
  height: 7.5vh;
  line-height: 7.5vh;
  text-align: center;
}

.major_info_item1 .both_heigh_table th {
  vertical-align: middle;
  padding: 1.6vh 0.7vw;
  color: #000000;
  font-size: 14px;
}

.major_info_item1 table tr th:first-child {
  width: 26.5vw;
  border-right: 1px solid #ededed;
}

.both_heigh_table th:last-child {
  line-height: 3.9vh;
  text-align: left;
}

.major_item1 div:first-child {
  width: 30%;
  text-align: center;
}

.major_item1 div:nth-child(2) {
  width: 0.1vw;
  background-color: #999;
}

.major_item1 div:last-child {
  margin-left: 1.5vw;
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.majorStyle {
  font-size: 14px;
  padding: 0.8vh 0.7vw;
  margin-left: 0.7vw;
  margin-bottom: 2.4vh;
  height: 4.9vh;
  line-height: 4.9vh;
  text-align: center;
  border: 1px solid rgba(215, 215, 215);
  border-radius: 5px;
}

.majorStyle:hover {
  cursor: pointer;
  color: rgba(255, 101, 0);
}

.major_item2 {
  padding: 0;
  margin-left: 0.4vw;
  margin-top: 3.3vh;
  margin-bottom: 3.3vh;
}

table {
  width: 100%;
  padding: 0 3.2vw 0 3.5vw;
  overflow: hidden;
  border-collapse: collapse;
  border-spacing: 0;
}

table tr {
  border: 1px solid #ededed;
  height: 7.5vh;
  line-height: 7.5vh;
  text-align: center;
}

tr th:first-child {
  width: 25.9vw;
  border-right: 1px solid #ededed;
}
tr th {
  font-size: 16px;
  font-weight: 400;
  color: #888;
  vertical-align: middle;
  padding: 1.6vh 0.7vw;
  text-align: center;
}

table tr td:first-child {
  width: 13.5vw;
  border-right: 1px solid #ededed;
  text-align: center;
}
table tr td {
  font-size: 14px;
  color: #000000;
  vertical-align: middle;
  padding: 1.6vh 0.7vw;
  text-align: left;
}

.major_item {
  width: auto;
  float: left;
  margin: 0 1.6vh;
}
</style>